import { SetupContext, Ref, ref, onMounted, nextTick, onUnmounted } from 'vue';
import { ExtendPanelPropsType } from '../extend-panel.props'
import { UseEvents } from './types';
import { ItemType } from '../components/types';
export function useEvents(
    props: ExtendPanelPropsType,
    context: SetupContext,
    extendPanelRef: Ref,
    coverWidth: Ref,
    checked:Ref
): UseEvents {
    const onClickItem = (item: ItemType, key: number): void => {
        let items = [...extendPanelRef.value?.children[0]?.children]
        let retractItems: any = items.map((el: Element) => {
            return {
                width: el.clientWidth,
                el: el
            }
        });
        let minItem = retractItems.sort((a: any, b: any) => a.width - b.width)[0];
        if (key === checked.value) {
            // context.emit('update:checked', undefined);
            checked.value = undefined;
        } else {
            // context.emit('update:checked', key);
            checked.value = key;
            coverWidth.value = minItem.width;
        }
        context.emit('clickCover',item,key,checked.value);
    }
    return {
        onClickItem,
    }
}